<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走过的路</title>
    <!-- 引入facicon.ico网页图标 -->
	<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/> 
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/layui/dist/css/layui.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header" style="box-shadow: 10px 0.5px 3px #888888; ">
            <a href="#"><h2 class="fl logo" style="padding-left: 30px;">Record</h2></a>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <a href="javascript:;"> <i id="leftEnumIcon" class="layui-icon layui-icon-spread-left"></i></a>
                </li>
               
				
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item ">
                      <a href="#"><img src="img/logo.jpg" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                <dd><a href="/templates/about.html">关于我</a></dd>
                <dd><a href="javascript:;" onclick="logout()">退出</a></dd>
                </dl>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <div title="菜单缩放" class="kit-side-fold"><i style="margin-left:38%; font-size: 20px;" class="layui-icon layui-icon-spread-left" aria-hidden="true"></i></div>
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;"><i class="iconfont">&#xe71e;</i> <span >单片机类</span></a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" onclick="change('51')"><i class="iconfont">&#xe607;</i> <span>51单片机</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('stm8')"><i class="iconfont">&#xe716;</i> <span>stm8</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('stm32')"><i class="iconfont">&#xe606;</i> <span >stm32</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('ardunio')"><i class="iconfont">&#xe6fc;</i> <span >Ardunio</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('esp8266')"><i class="iconfont" style="font-size: 21px ; margin-left: -3px;">&#xe64e;</i> <span >ESP8266</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('esp32')"><i class="iconfont" style="font-size: 21px; margin-left: -3px;">&#xe64f;</i> <span >ESP32</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('fpga')"><i class="iconfont" style="font-size: 21px; margin-left: -3px;">&#xe64d;</i> <span >FPGA</span></a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a class=""  href="javascript:;"><i class="iconfont">&#xe823;</i> <span >工具类</span></a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" onclick="change('hanjie')"><i class="iconfont">&#xe607;</i> <span >焊接</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('fangzhen')"><i class="iconfont">&#xe716;</i> <span >仿真</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('pcb')"><i class="iconfont">&#xe606;</i> <span >画板子</span></a></dd>
                            <dd><a href="javascript:;" onclick="change('shangweiji')"><i class="iconfont">&#xe6fc;</i> <span >上位机设计</span></a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a class="" href="javascript:;" onclick="change('shop')"><i class="iconfont">&#xe90e;</i> <span >店铺推荐</span></a>
                    </li>
                    <li class="layui-nav-item">
                        <a class="" href="javascript:;" onclick="change('web')"><i class="iconfont">&#xe600;</i> <span >常用网站汇总</span></a>
                    </li>
                    
                    
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <iframe src="/templates/51.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%; border-radius: 2px;"></iframe>     
        </div>

        <div class="layui-footer" style="font-weight: 200; color: #888888;">
            <!-- 底部固定区域 -->
            @llw 2021/09/03
        </div>
    </div>
<!-- 引入 layui.js -->
<script src="/layui/dist/layui.js"></script>

    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    // $(this).addClass("checked-menu").siblings().removeClass("checked-menu");
                    var btn = $("#leftEnumIcon");
                    if (btn.hasClass('layui-icon-spread-left')) {
                        menuHide(btn);
                        btn.addClass('btn-index');
                    } else if (btn.has('layui-icon-shrink-right')) {
                        btn.removeClass('btn-index');
                        menuShow(btn);
    
                    }
 
                $(window).resize(function () {
                    var width = $(document.body).width();
                    var btn = $("leftEnumIcon");
                    if (width < 1000) {
                        if (btn.hasClass('layui-icon-spread-left')) {
                            menuShow(btn);
                        }
                    } else {
                        if (!btn.hasClass('btn-index')) {
                            if (btn.hasClass('layui-icon-shrink-right')) {
                                menuHide(btn);
 
                            }
                        }
 
 
                    }
 
                });
 
                function menuShow(btn) {
                    btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                    $(".layui-side").animate({width: 'toggle'});
                    $(".zq-logo").animate({width: 'toggle'});
                    $(".layui-body").animate({left: '200px'});
                    $(".layui-footer").animate({left: '200px'});
                }
 
                function menuHide(btn) {
                    btn.removeClass(' layui-icon-spread-left').addClass('layui-icon-shrink-right');
                    $(".layui-side").animate({width: 'toggle'}); //toggle如果原来div是隐藏的就会把元素显示，如果原来是显示则隐藏
                    $(".zq-logo").animate({width: 'toggle'});
                    $(".layui-body").animate({left: '0px'});
                    $(".layui-footer").animate({left: '0px'});
                }
            }

                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });


            var isShow = true;  //定义一个标志位
            $('.kit-side-fold').click(function(){
                //选择出所有的span，并判断是不是hidden
                $('.layui-nav-item span').each(function(){
                    if($(this).is(':hidden')){
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
                //判断isshow的状态
                if(isShow){
                    $('.layui-side.layui-bg-black').width(60); //设置宽度
                    $('.kit-side-fold i').css('margin-left', '8%');  //修改图标的位置
                    $('.kit-side-fold i').addClass("layui-icon-shrink-right").removeClass("layui-icon-spread-left");
                    //将footer和body的宽度修改
                    $('.layui-body').css('left', 60+'px');
                    $('.layui-footer').css('left', 60+'px');
                    //将二级导航栏隐藏
                    $('dd span').each(function(){
                        $(this).hide();
                    });
                    //修改标志位
                    isShow =false;
                }else{
                    $('.layui-side.layui-bg-black').width(200);
                    $('.kit-side-fold i').css('margin-left', '38%');
                    $('.kit-side-fold i').addClass("layui-icon-spread-left").removeClass("layui-icon-shrink-right");
                    $('.layui-body').css('left', 200+'px');
                    $('.layui-footer').css('left', 200+'px');
                    $('dd span').each(function(){
                        $(this).show();
                    });
                    isShow = true;
                }
            });
           
        });
       
    </script> 
    <script>
        var $ = layui.$;
        function change(str){
               $('iframe').attr('src','/templates/'+str+'.html');
           }
         function logout(){
            sessionStorage.removeItem("token");
            layer.msg('正在退出', {icon: 4,time:1000}); 
            setTimeout(function(){
            window.location.replace('index.html')
            },1500) 
        }
        // $('.layui-nav-tree').on('click','li',function(){
        //     $(this).addClass('layui-nav-itemed').siblings('li').removeClass('layui-nav-itemed');
        // })
        var token = sessionStorage.getItem("token");
            if(token == null || token != 123){
             window.location.replace('index.html')
            } 
    </script>
</body>
</html>